<template>
  <div class="main">
    <div class="body">
      <div class="add">
        <div class="bodyinfo">
          <div class="infoadd">教师管理</div>

          <div class="buttons">
            <div>
              <el-button @click="dialogFormVisible = true">添加教师</el-button>
            </div>
          </div>
          <!-- 添加弹框 -->
          <el-dialog title="添加教师" v-model="dialogFormVisible" label-position="left">
            <el-form :model="formAdd" 
              ><div>
                <div class="teacherAdd">
                  <div class="teacherAdda">
                    <el-form-item label="教师名称">
                      <el-input
                        v-model="formAdd.name"
                        autocomplete="off"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                      <el-input
                        v-model="formAdd.tel"
                        autocomplete="off"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="微信号">
                      <el-input
                        v-model="formAdd.wechat"
                        autocomplete="off"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="讲师类型">
                      <el-checkbox-group v-model="type">
                        <el-checkbox label="主讲老师" name="type"></el-checkbox>
                        <el-checkbox label="助教老师" name="type"></el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                  </div>
                  <div class="teacherAddb">
                    <el-upload
                      action="#"
                      list-type="picture-card"
                      :auto-upload="false"
                    >
                      <template #default>
                        <i class="el-icon-plus"></i>
                      </template>
                      <template #file="{ file }">
                        <div>
                          <img
                            class="el-upload-list__item-thumbnail"
                            :src="file.url"
                            alt=""
                          />
                          <span class="el-upload-list__item-actions">
                            <span
                              class="el-upload-list__item-preview"
                              @click="handlePictureCardPreview(file)"
                            >
                              <i class="el-icon-zoom-in"></i>
                            </span>
                            <span
                              v-if="!disabled"
                              class="el-upload-list__item-delete"
                              @click="handleDownload(file)"
                            >
                              <i class="el-icon-download"></i>
                            </span>
                            <span
                              v-if="!disabled"
                              class="el-upload-list__item-delete"
                              @click="handleRemove(file)"
                            >
                              <i class="el-icon-delete"></i>
                            </span>
                          </span>
                        </div>
                      </template>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                  </div>
                </div>
              </div>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="teacherAdds()"
                  >确 定</el-button
                >
              </span>
            </template>
          </el-dialog>



          <el-dialog title="修改教师" v-model="dialogFormVisibles">
            <el-form :model="formAdd"
              ><div>
                <div class="teacherAdd">
                  <div class="teacherAdda">
                    <el-form-item label="教师名称">
                      <el-input
                        v-model="formAdd.name"
                        autocomplete="off"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                      <el-input
                        v-model="formAdd.tel"
                        autocomplete="off"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="微信号">
                      <el-input
                        v-model="formAdd.wechat"
                        autocomplete="off"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="讲师类型">
                      <el-checkbox-group v-model="type">
                        <el-checkbox label="主讲老师" name="type"></el-checkbox>
                        <el-checkbox label="助教老师" name="type"></el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                  </div>
                  <div class="teacherAddb">
                    <el-upload
                      action="#"
                      list-type="picture-card"
                      :auto-upload="false"
                    >
                      <template #default>
                        <i class="el-icon-plus"></i>
                      </template>
                      <template #file="{ file }">
                        <div>
                          <img
                            class="el-upload-list__item-thumbnail"
                            :src="file.url"
                            alt=""
                          />
                          <span class="el-upload-list__item-actions">
                            <span
                              class="el-upload-list__item-preview"
                              @click="handlePictureCardPreview(file)"
                            >
                              <i class="el-icon-zoom-in"></i>
                            </span>
                            <span
                              v-if="!disabled"
                              class="el-upload-list__item-delete"
                              @click="handleDownload(file)"
                            >
                              <i class="el-icon-download"></i>
                            </span>
                            <span
                              v-if="!disabled"
                              class="el-upload-list__item-delete"
                              @click="handleRemove(file)"
                            >
                              <i class="el-icon-delete"></i>
                            </span>
                          </span>
                        </div>
                      </template>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                  </div>
                </div>
              </div>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisibles = false">取 消</el-button>
                <el-button type="primary" @click="formedit()"
                  >修 改</el-button
                >
              </span>
            </template>
          </el-dialog>
          <!-- 弹框end --> 
          
          <div class="infosaa">
            <div class="infosa">
              <div class="infoa">
                <div class="classInfoa">
                  <div><input type="text" placeholder="请输入教师名称" v-model="queryInfo.name"/></div>
                  <div class="searcha" @click="getItemList">
                    <i class="el-icon-search"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="margin-left: 20px" @mouseover="info()" @mouseout="hide()">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>

            <el-table-column
              prop="name"
              width="300px"
              label="教师名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="type"
              width="300px"
              label="教师类型"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column width="300px" label="操作" show-overflow-tooltip
              ><template #default="scope">
                <div v-show="showa == 1">
                  <el-button type="primary" round size="mini"  @click="dialogFormVisibles=true;updateds(scope.row.id)">修改</el-button>
                  <el-button
                    type="danger"
                    round
                    size="mini"
                    @click="deletes(scope)"
                    >删除</el-button
                  >
                </div></template
              >
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.page"
            :page-sizes="[1, 5, 10, 20]"
            :page-size="queryInfo.psize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  data() {
    return {
      // 添加
      formAdd: {
        name: "",
        tel: "",
        wechat: "",
        type: '',
      },
      type:[],
      // 总页数
      total: 0,
      // 分页数据
      queryInfo: {
        page: 1,
        psize: 5,
        name:''
      },
      // 上传
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      // 控制列表的显示跟隐藏
      showa: "2",
      // 添加弹框默认关闭设置
      dialogFormVisible: false,
      dialogFormVisibles: false,
      form: {
        name: "",
        type: [],
      },
      formdata: {
        username: "",
      },
      input3: ref(""),
      select: ref(""),
      tableData: [],
      multipleSelection: [],
      formInline: {
        user: "",
        region: "",
      },
      urriculumInfos: [],
    };
  },
  created() {
    this.getItemList();
  },
  methods: {
    // 添加
    async teacherAdds() {
      let type=this.type.join(",")
      this.formAdd.type=type
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/teachers/add",
        this.formAdd
      );
      if (res.errCode == 10000) {
        this.$message.success("添加成功");
      } else {
        this.$message.error("添加失败");
      }
      this.getItemList();
    },
    // 分页
    handleSizeChange(val) {
      this.queryInfo.psize = val;
      this.getItemList();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.queryInfo.page = val;
      this.getItemList();
      // console.log(`当前页: ${val}`);
    },
    // 删除
    async deletes(addss) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const self = this;
      const teacherId = addss.row.id;
      const token = window.sessionStorage.getItem("token");
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/teachers/delete?id=" +
          teacherId,
        { headers: { token } }
      );
      if(res.errCode == 10000){
        this.$message.success('添加成功')
      }else{
        this.$message.error('添加失败 ')
      }
      self.getItemList();
    },
    // 修改
    updateds(id){
      this.formAdd.id = id
      // 处理默认值
      this.tableData.forEach((item) => {
        if(id == item.id){
          this.formAdd.name = item.name
          this.formAdd.tel = item.tel
          this.formAdd.wechat = item.wechat
          this.formAdd.type = item.type
        }
      })
    },
    //执行修改
     async formedit() {
      let type=this.type.join(",")
      this.formAdd.type=type
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/teachers/add",
        this.formAdd
      );
      if (res.errCode == 10000) {
        this.$message.success("修改成功");
      } else {
        this.$message.error("修改失败");
      }
      this.getItemList();
    },
    // 上传
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    // 控制操作按钮的显示跟隐藏
    info() {
      const self = this;
      self.showa = "1";
    },
    hide() {
      const self = this;
      self.showa = "2";
    },
    //  获取教师管理列表
    async getItemList() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/teachers/list?cat=0",
        { params: this.queryInfo }
      );
      this.total = res.data.counts;
      this.tableData = res.data.list;
      this.dialogFormVisible = false;
      this.dialogFormVisibles = false;
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
});
</script>
<style>
.body {
  display: flex;
}

.bodyinfo {
  width: 100%;
  height: 50px;
  display: flex;
  padding: 0;
}
.buttons {
  line-height: 50px;
  width: 150px;
  height: 50px;
  display: flex;
  justify-content: space-around;
}
.infoadd {
  width: 100px;
  height: 50px;
  background-color: rgb(246, 249, 250);
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  font-size: 14px;
}

.block {
  margin-left: 15px;
}
.active {
  background: #fd7522;
  border: 1px solid #fd7522;
  color: #fff;
}
.infosa {
  width: 25%;
}
.classInfoa {
  margin-left: 2%;
  height: 30px;
  display: flex;
  line-height: 30px;
  /* align-items: center; */
  border: 1px solid #ccc;
  background-color: #fff;
}
.classInfoa div:nth-child(2) {
  line-height: 30px;
}
.searcha {
  width: 30px;
  height: 30px;
  font-size: 20px;
  cursor: pointer;
  line-height: 30px;
}
.infoa {
  display: flex;
  flex-direction: row;
  width: 450px;
  align-items: center;
  margin-top: 10px;
  margin-left: 30px;
}
.infosaa {
  width: 25%;
}
.teacherAdd {
  display: flex;
}
.teacherAdda {
  width: 450px;
}
.classInfoa input {
  padding-left: 15px;
}
</style>